<template>
  <div class="navbar">
    <!-- 主页面导航navbar -->
    <van-nav-bar :title="title" fixed placeholder z-index="99">
      <!-- 左侧插槽 -->
      <template #left>
        <!-- toAnother('/search')前往页面"搜索" -->
        <van-icon name="search" size="24" @click="toAnother('/search')" />
      </template>
      <!-- 右侧插槽 -->
      <template #right>
        <!-- 判断用户是否已登录,若未登录显示登录及注册按钮 -->
        <div v-if="!isLogin" class="offline">
          <router-link to="/login">登录</router-link>
          <span><b>|</b></span>
          <router-link to="/regist">注册</router-link>
        </div>
        <!-- 若已登录，显示用户头像 -->
        <!-- toAnother('/my')前往页面"我的" -->
        <div v-else class="useravatar" @click="toAnother('/my')">
          <img src="/subscriber-fill.png" />
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      title: this.$route.meta.title,
    };
  },
  computed: {
    ...mapState(["isLogin"]),
  },
  methods: {
    // 导航点击事件，根据点击位置前往不同页面
    toAnother(link) {
      this.$router.push(link);
    },
  },
};
</script>

<style scoped>
/* 用户头像样式 */
.useravatar {
  width: 46px;
  height: 46px;
}
.useravatar > img {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  display: block;
  border-radius: 50%;
}
/* 未登录时导航样式 */
.offline,
.offline a {
  margin: 0 5px;
  color: #fff;
  vertical-align: middle;
}
</style>
